<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入商品名称" v-model="queryInfo.productName" 
                    clearable @clear="getOrderList">
                        <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <!-- 数据表格区域 -->
            <el-table :data="orderList" stripe  height="450">
                <el-table-column prop="orderDetailId" label="订单编号" width="120px"></el-table-column>
                <el-table-column prop="totalPayment" label="实付款(￥)" width="120px"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
                <el-table-column prop="founder" label="创建人账号" width="120px"></el-table-column>
                <el-table-column prop="contactsName" label="收货人" width="120px"></el-table-column>
                <el-table-column prop="contactsPhone" label="收货人电话" width="120px"></el-table-column>
                <el-table-column prop="address" label="收货地址" width="120px"></el-table-column>
                <el-table-column 
                    prop="orderState" 
                    label="订单状态" 
                    width="120px"
                    :filters="orderStateFilters"
                    :filter-method="orderStateMethod"
                    filter-placement="bottom-end">
                    <template slot-scope="scope">
                        <el-tag
                        :type="scope.row.orderState === 0 ? 'danger': 'success'">
                            {{ scope.row.orderState | orderStateFilter }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120px">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-document" @click="detail(scope.row.orderDetailId)">订单详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.currentPage"
                :page-sizes="[5, 10, 20, 30]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>

        <!-- 订单详情对话框 -->
        <el-dialog title="订单详情" class="orderDetailDialog" :visible.sync="detailDialogVisible" width="50%">
            <el-descriptions :title="'订单编号:' + orderDetail.orderDetailId">
                <el-descriptions-item label="总付款">{{ orderDetail.totalPayment }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ orderDetail.createTime }}</el-descriptions-item>
                <el-descriptions-item label="订单状态">
                    <el-tag size="small" :type="orderDetail.orderState === 0 ? 'danger': 'success'">{{ orderDetail.orderState | orderStateFilter }}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
            <!-- 收货信息 -->
            <el-descriptions title="收货信息" border>
                <el-descriptions-item label="收货人">{{ orderDetail.address.contactsName }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ orderDetail.address.contactsPhone }}</el-descriptions-item>
                <el-descriptions-item label="收货地址">
                    {{ orderDetail.address.province +' '+ orderDetail.address.city +' '+ orderDetail.address.district +' '+ orderDetail.address.detailAddress }}
                </el-descriptions-item>
            </el-descriptions>
            
            <!-- 购物清单 -->
            <h3 style="font-size: 16px;color: #303133;margin-top: 20px;">购物清单</h3>
            <el-table :data="orderDetail.productVoList" :cell-style="cellStyleRuleMethod" border style="width: 100%; margin-top: 20px">
                <el-table-column label="商品" width="260px">
                    <template slot-scope="scope">
                        <div class="productImage"><img :src="scope.row.mainImage.includes('http:')?scope.row.mainImage:$target + scope.row.mainImage"/></div>
                        <div class="productName">{{ scope.row.productName }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="单价(￥)">
                </el-table-column>
                <el-table-column prop="productNumber" label="数量">
                </el-table-column>
                <el-table-column label="小计(￥)">
                    <template slot-scope="scope">
                        {{ multiply(scope.row.price, scope.row.productNumber) }}
                    </template>
                </el-table-column>
            </el-table>
            <!-- <el-form ref="form" :model="orderDetail" label-width="80px">
                <el-form-item label="订单编号">
                    <el-input :value="orderDetail.orderDetailId" readonly></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input :value="orderDetail.createTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-tag>{{ orderDetail.orderState | orderStateFilter }}</el-tag>
                </el-form-item>
                <el-form-item label="总付款">
                    <el-input :value="orderDetail.totalPayment" readonly></el-input>
                </el-form-item>
            </el-form> -->
            
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 获取商品列表的参数对象
            queryInfo: {
                productName: '',
                //当前页数
                currentPage: 1,
                //当前每页显示多少条数据
                pageSize: 10
            },
            //订单列表
            orderList: [],
            //总数据条数
            total: 0,
            //
            orderStateFilters: [
                {
                    text: '未付款',
                    value: 0
                },{
                    text: '已付款',
                    value: 1
                }
            ],
            //控制订单详情对话框的显示/隐藏
            detailDialogVisible: false,
            //查询的订单详情
            orderDetail: {
                address: {},
                productVoList: []
            }
        }
    },
    created() {
        this.getOrderList();
    },
    methods: {
        //查询分页订单列表
        getOrderList(){
            this.$axios
            .get('/order/list', { params: this.queryInfo })
            .then(res => {
                const data = res.data;
                if(data.code !== '001') return this.$notifyError("数据获取异常");
                this.orderList = data.list;
                this.total = data.totalRecords;
            })
            .catch(err => {
                console.log(err);
            });
        },
        handleSizeChange(newSize) {
            this.queryInfo.pageSize = newSize;
            this.getOrderList();
        },
        handleCurrentChange(newPage) {
            this.queryInfo.currentPage = newPage;
            this.getOrderList();
        },
        orderStateMethod(value, row){
            return row.orderState = value;
        },
        //订单详情
        detail(orderDetailId){
            const params = {
                'orderDetailId': orderDetailId
            }
            //查询订单详情
            this.$axios
            .get('/order/orderDetail', { params: params })
            .then(res => {
                const data = res.data;
                if(data.code !== '001') return this.$notifyError("数据获取异常");
                this.orderDetail = data.data;
                //显示对话框
                this.detailDialogVisible = true;
            })
            .catch(err => {
                console.log(err);
            });
        },
        //订单详情中的购物清单单元格样式方法
        cellStyleRuleMethod({ row, column, rowIndex, columnIndex }) {
            console.log(row, column, rowIndex, columnIndex);
            if(columnIndex < 3){
                return { 'border': 'none' }
            }
        }
    }
}
</script>
<style lang="less" scoped>
.orderDetailDialog /deep/ .el-input__inner {
    border: none;
}
.orderDetailDialog /deep/ .productImage,.productName {
    display: table-cell;
	vertical-align: middle;
    padding: 5px;
}
.orderDetailDialog /deep/ .productImage img {
    width: 100px;
    height: 100px;
}
.orderDetailDialog /deep/ .productName {
    margin-left: 5px;
    font-size: 14px;
    color: #000;
}
</style>